<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form method="post">
    {{ form.csrf_token }}
    {{ form.author_name.label }}
    <p>{{ form.author_name }}</p>
    {% for msg in form.author_name.errors %}
        <p>{{ msg }}</p>
    {% endfor %}

    {{ form.book_name.label }}
    <p>{{ form.book_name }}</p>
    {% for msg in form.book_name.errors %}
        <p>{{ msg }}</p>
    {% endfor %}

    {{ form.submit }}

</form>

<hr>
<ul>
    {% for author in authors %}
        <li>作者：{{ author.name }}</li>
        <ul>
            {% for book in author.books %}
                <li>书籍：{{ book.name }}</li>
                <a href="javascript:;" book-id="{{ book.id }}">POST删除</a>
                <a href="/delete_book?book_id={{ book.id }}">GET删除</a>
            {% endfor %}
        </ul>
    {% endfor %}
</ul>

<script type="text/javascript" src="/static/js/lib/jquery2.2.4/jquery-2.2.4.min.js"></script>
<script>
    $("a").click(
        function () {
            alert('点击了删除');
            var data = {
                book_id: $(this).attr("book-id")
            };
            var req_json = JSON.stringify(data);

            /*
            // 简写方式
            $.post("/delete_book", req_json, function (resp) {
                if (resp.code == 0) {
                    location.href = '/';
                }
            });
            */

            // 详细方式
            $.ajax({
                url: "/delete_book", // 请求的url
                type: "post",  // 请求方式
                data: req_json,  // 向后端发送的请求体数据
                contentType: "application/json",  //指明向后端发送的数据格式
                dataType: "json",  // 指明后端返回的数据格式
                success: function (resp) {
                    if (resp.code == 0) {
                        alert(resp.message);
                        location.href = '/';
                    }
                }
            })

        }
    )

</script>
</body>
</html>